<template>
	<view class="login-container">
		<view class="logo-area">
			<image class="logo" src="/static/logo.png"></image>
			<text class="title">智能社区服务平台</text>
		</view>
		
		<view class="form-area">
			<view class="input-group">
				<view class="input-label">用户名</view>
				<input class="input-box" v-model="loginForm.username" placeholder="请输入用户名" />
			</view>
			
			<view class="input-group">
				<view class="input-label">密码</view>
				<input class="input-box" v-model="loginForm.password" type="password" placeholder="请输入密码" />
			</view>
			
			<button class="login-btn" @click="handleLogin">登录</button>
			
			<view class="other-links">
				<text class="link-text" @click="goToRegister">注册账号</text>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '@/api/user.js';

export default {
	data() {
		return {
			loginForm: {
				username: '',
				password: ''
			}
		}
	},
	methods: {
		// 处理登录
		async handleLogin() {
			// 表单验证
			if (!this.loginForm.username.trim()) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				});
				return;
			}
			
			if (!this.loginForm.password.trim()) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return;
			}
			
			try {
				uni.showLoading({
					title: '登录中...'
				});
				
				// 调用登录接口
				const result = await login(this.loginForm);
				
				// 存储登录信息
				uni.setStorageSync('token', result.data.token || result.token);
				uni.setStorageSync('refreshToken', result.data.refreshToken || result.refreshToken);
				uni.setStorageSync('userInfo', result.data.user || result.user);
				
				uni.hideLoading();
				
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				
				// 跳转到首页
				uni.reLaunch({
					url: '/pages/index/index'
				});
			} catch (error) {
				uni.hideLoading();
				console.error('登录失败', error);
			}
		},
		
		// 跳转到注册页面
		goToRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 40rpx;
	background-color: #f8f8f8;
}

.logo-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 100rpx;
	margin-bottom: 80rpx;
}

.logo {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 30rpx;
}

.title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
}

.form-area {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.input-group {
	margin-bottom: 40rpx;
}

.input-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.input-box {
	height: 80rpx;
	border-bottom: 2rpx solid #e0e0e0;
	font-size: 30rpx;
}

.login-btn {
	height: 90rpx;
	border-radius: 45rpx;
	background-color: #007AFF;
	color: #fff;
	font-size: 32rpx;
	margin-top: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.other-links {
	display: flex;
	justify-content: center;
	margin-top: 40rpx;
}

.link-text {
	color: #007AFF;
	font-size: 28rpx;
}
</style> 